{% extends "base.html" %}
{% load static %}
{% load crispy_forms_tags %}

{% block title %}
    Admin Dashboard | {{ block.super }}
{% endblock title %}

{% block stylesheets %}
    {{ block.super }}
    <!-- Custom styles for this template -->
    <link href="{% static "laioffer/css/dashboard.css" %}" rel="stylesheet">
    <link rel="stylesheet" href="{% static "bootstrap-calendar/css/calendar.css" %}">
    <link rel="stylesheet" href="{% static "bootstrap-calendar/css/custom.css" %}">
    <style type="text/css">
      #calendar {
        margin-bottom: 15px !important;
      }
      #conflict-wrapper h4 {
        margin-bottom: 15px;
      }
      span.red {
        color: red !important;
      }
    </style>
{% endblock stylesheets %}

{% block content %}

    {% include "_admin_sidebar.html" %}
    <section id="main-content">
        <section class="wrapper">
            <div class="table-agile-info">
                <div class="panel panel-default">

                    <section class="panel-heading">{{ view.section_title }}</section>

                    <div class="page-header">
                        <div class="pull-right form-inline">
                            <div class="btn-group">
                                <button class="btn btn-primary" data-calendar-nav="prev"><< Prev</button>
                                <button class="btn btn-default" data-calendar-nav="today">Today</button>
                                <button class="btn btn-primary" data-calendar-nav="next">Next >></button>
                            </div>
                            <div class="btn-group">
                                <button class="btn btn-warning" data-calendar-view="year">Year</button>
                                <button class="btn btn-warning" data-calendar-view="month">Month</button>
                                <button class="btn btn-warning" data-calendar-view="week">Week</button>
                                <button class="btn btn-warning" data-calendar-view="day">Day</button>
                            </div>
                        </div>

                        <h3></h3>
                    </div>

                    <div id="calendar"></div>

                    <div id="conflict-wrapper" class="well">
                        <h4>Zoom Conflicts</h4>
                        <div class="btn-group" id="conflict"></div>
                    </div>

                    <div class="well">
                        <h4>Activities</h4>
                        <ul id="eventlist" class="nav nav-list"></ul>
                    </div>

                </div>
            </div>
        </section> <!-- /wrapper -->
    </section> <!-- /main-content -->

{% endblock content %}

{% block javascripts %}
    {{ block.super }}
    <script type="text/javascript" src="{% static "bootstrap-calendar/js/underscore.js" %}"></script>
    <script type="text/javascript" src="{% static "bootstrap-calendar/js/calendar.js" %}"></script>
    <script type="text/javascript">
        $.py = {};
        $.py.get_modules_url = '{% url "course:get_supervisor_modules" %}';
        $.py.append_add_module_link = false;
        $.py.user_role = 'supervisor';
    </script>
    <script type="text/javascript" src="{% static "bootstrap-calendar/js/custom.js" %}"></script>
    <script type="text/javascript" src="{% static "bootstrap-calendar/js/conflict.js" %}"></script>
{% endblock javascripts %}
